<template>
  <div class="header-nav">
    <div class="header-nav-logo">
      <img src="https://adoreibet.com/logo_small.png" />
    </div>
    <div class="header-nav-btn">
      <div class="button" @click="showLoginDialog"><span>Login</span></div>
      <div
        class="button blue"
        style="background: rgb(0, 128, 255)"
        @click="showLoginDialog"
      >
        <span>Register</span>
      </div>
    </div>
  </div>
  <van-dialog
    v-model:show="vanDialogShow"
    closeOnClickOverlay
    :show-confirm-button="false"
    class="dialogContent"
  >
    <header>
      <section name="first" style="margin-bottom: 20px">
        <span
          :class="isLogin ? 'text_active' : ''"
          class="bgSpan"
          @click="changeLogin('login')"
          >Entrar</span
        >
        <span
          :class="!isLogin ? 'text_active' : ''"
          class="text_right bgSpan"
          @click="changeLogin('register')"
          >Registrar-se</span
        >
      </section>
      <section name="second" style="margin: 20px 0 10px 0">
        <span
          :class="isIphone ? 'text_active_fn' : ''"
          @click="changeLoginFn('iphone')"
          >Celular</span
        >
        <span
          :class="!isIphone ? 'text_active_fn' : ''"
          class="text_right"
          @click="changeLoginFn('Email')"
          >Email</span
        >
      </section>
    </header>
    <section class="contentContainer">
      <van-cell-group inset>
        <van-field
          class="van-field-item"
          style="margin-top: 25px"
          v-model="phone"
          :label="isIphone ? 'iphone' : 'Email'"
          placeholder="Numero de telefone"
        />
        <van-field
          class="van-field-item"
          v-model="password"
          label="password"
          placeholder="Senha"
        />
        <van-field
          v-if="!isLogin"
          class="van-field-item bottomItem"
          v-model="registerCode"
          placeholder="Código de Convite(Opcional)"
        />
      </van-cell-group>
      <div class="tip" v-if="isLogin"><span>Esqueceu a senha ?</span></div>
      <van-button class="confirmBtn" round type="primary">Entrara</van-button>
      <div class="bottomText">
        <span>Este site é verificado e Google</span>
        <span class="activeText">Política de Privacidade</span>
        <span>e</span>
        <span class="activeText">Termos de serviço </span>
        <span>Aplicar.</span>
      </div>
      <div class="lineBlock">
        <span>OR</span>
      </div>
      <footer><img :src="instagramIcon" /></footer>
    </section>
  </van-dialog>
</template>

<script>
import { Dialog, Field, CellGroup, Button } from "vant";
export default {
  data() {
    return {
      vanDialogShow: false,
      instagramIcon: require("../assets/image/instagram.png"),
      isLogin: true,
      isIphone: true,
    };
  },
  components: {
    VanDialog: Dialog,
    VanField: Field,
    VanCellGroup: CellGroup,
    VanButton: Button,
  },
  methods: {
    showLoginDialog() {
      this.vanDialogShow = true;
    },
    changeLogin(type) {
      if (type === "login") {
        this.isLogin = true;
      } else if (type === "register") {
        this.isLogin = false;
      }
    },
    changeLoginFn(type) {
      if (type === "iphone") {
        this.isIphone = true;
      } else if (type === "Email") {
        this.isIphone = false;
      }
    },
  },
};
</script>

<style lang="scss">
.dialogContent {
  background-color: #142431 !important;
  header {
    width: 60%;
    height: 60px;
    line-height: 30px;
    margin-left: 20px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    .text_right {
      margin-left: 20px;
    }
    .text_active {
      color: #fff;
      background: #2c3a46;
      border-radius: 20px;
    }
    .text_active_fn {
      color: #fff;
      background: #2c3a46;
      border-radius: 20px;
    }
    span {
      padding: 5px;

      &.bgSpan {
        padding: 10px;
      }
    }
  }
  .contentContainer {
    .van-cell-group {
      background: transparent;
    }
    .van-field-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: #142431;
      margin-top: 12px;
      border-radius: 10px;
      &.bottomItem {
        margin-bottom: 10px;
      }
      &::after {
        border: none;
      }
      .van-cell__title {
        color: #fff9;
      }
      input::placeholder {
        font-weight: 400;
        color: #fff6;
        font-size: 12px;
      }
      input {
        color: #fffc;
      }
    }
    .tip {
      font-size: 12px;
      line-height: 24px;
      margin-top: 10px;
      margin-bottom: 12px;
      margin-left: 20px;
      cursor: pointer;
      color: #fff9;
    }
    .confirmBtn {
      width: 90%;
      height: 40px;
      margin-left: 20px;
    }
    .bottomText {
      width: 100%;
      text-align: center;
      font-size: 12px;
      margin-top: 30px;
      color: #fff9;
      .activeText {
        padding-left: 2px;
        padding-right: 2px;
        color: #fff;
      }
    }
    .lineBlock {
      width: 90%;
      height: 20px;
      margin-top: 10px;
      margin-left: 20px;
      margin-bottom: 30px;
      display: flex;
      color: #000000d9;
      font-weight: 500;
      font-size: 16px;
      white-space: nowrap;
      text-align: center;
      border-top: 0;

      &::before {
        position: relative;
        top: 50%;
        width: 50%;
        border-top: 1px solid transparent;
        border-top-color: inherit;
        border-bottom: 0;
        transform: translateY(50%);
        content: "";
        border-top-color: #ffffff0f;
      }

      &::after {
        position: relative;
        top: 50%;
        width: 50%;
        border-top: 1px solid transparent;
        border-top-color: inherit;
        border-bottom: 0;
        transform: translateY(50%);
        content: "";
        border-top-color: #ffffff0f;
      }

      span {
        font-size: 12px;
        color: #fff9;
        position: relative;
        top: 13px;
      }
    }

    footer {
      margin: 30px 0;
      width: 100%;
      height: 30px;
      text-align: center;
      img {
        width: 30px;
        height: auto;
      }
    }
  }
}
//pc端
@media screen and (min-width: 768px) {
  .header-nav {
    height: 2.733333vw !important;
    background-color: #21303c !important;
  }
  .header-nav-logo,
  .header-nav-btn {
    height: 70% !important;
  }
  .header-nav-btn {
    flex: 0 0 90px !important;
  }
  .button {
    font-size: 0.8vw !important;
  }
  .button {
    background-color: #384550 !important;
  }
  .blue {
    background-color: #0080ff !important;
  }

  .dialogContent {
    scale: 0.3;
    height: 250vh !important;
    top: -40% !important;
    max-height: 250vh !important;
  }
}
//手机端
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  height: 44px;
  background: rgb(8, 25, 38);

  &-logo {
    height: 16px;

    img {
      height: 100%;
    }
  }

  &-btn {
    flex: 0 0 170px;
    display: flex;
    justify-content: space-between;
    .button {
      display: flex;
      align-items: center;
      padding: 0 15px;
      line-height: 32px;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      background: rgb(3, 48, 60);
      border-radius: 20px;
    }
  }
}
</style>
